<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title></title>
		<style type="text/css">
			.svg{
				width: 300px;
				height: 300px;
				background: #eee;
			}
		</style>
	</head>
	<body>
		<h3>裁剪实例</h3>
		<p>在 SVG 中我们使用clip-path元素来表示裁剪路径。</p>
		<p>clipPath 元素经常放在一个defs元素内</p>
		<svg class="svg">
			<defs>
				<clipPath id="cut-circle">
					<rect width="100" height="100" x="100" y="50"></rect>
				</clipPath>
			</defs>
			<circle cx="150" cy="150" r="50" fill="red" clip-path="url(#cut-circle)"></circle>
		</svg>
		<h3>遮罩实例</h3>
		<svg class="svg">
			<defs>
				<linearGradient id="gradient">
					<stop offset="0" stop-color="#fff" stop-opacity="0"></stop>
					<stop offset="1" stop-color="#fff" stop-opacity="1"></stop>
				</linearGradient>
				<mask id="mask">
					<rect x='0' y='0' width="300" height="300" fill="url(#gradient)"></rect>
				</mask>
			</defs>
			<rect x='0' y='0' width="300" height="300" fill="green"></rect>
			<!-- 使用遮罩，可以显示下面的绿色矩形 -->
			<rect x='0' y='0' width="300" height="300" fill="red" mask="url(#mask)"></rect>
		</svg>
	</body>
</html>
